<template>
	<view>
		<tn-nav-bar :isBack="true" backgroundColor="#3A87FF" class="tatils">废物宝</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px',backgroundColor:'#e5e5e5'}">
			<!-- <view  v-for="(item,index) in list" :key="index" style="overflow: hidden;height: 100px;width: 98%;
			margin: 0 auto;border-radius: 5px;padding: 5px;box-shadow: 5px 5px 5px 5px rgba(225, 225, 225, 0.5);
			margin-top: 3px;background-color: #fff;">
				<view style="float: left;width: 30%;height: 100px;padding:5px;">
					<image style="width: 100%;height: 100%;"
					 :src="item.goods.imagelist[0]"></image>
				</view>
				<view style="float: left;width:70%;padding:5px;">
					<view style="height: 20px;font-size: 16px;line-height: 20px;overflow: hidden;">{{item.goods.title}}</view>
					<view style="overflow: hidden;height: 30px;margin-top: 15px;line-height: 30px;">
						<view style="color: #e70000;width: 50%;float: left;font-size: 16px;">{{item.pic}}元</view>
						<view style="width: 50%;float: left;">
							<tn-number-box :min="1" :max="100"  v-model="item.num"></tn-number-box>
						</view>
					</view>
				</view>
			</view> -->

			<tn-swipe-action-item v-for="(item,index) in list" :key="index" :options="options1" name="0"
				@click="onSwiperItemClick(item.id)" style="overflow: hidden;height: 100px;width: 98%;
			margin: 0 auto;border-radius: 5px;box-shadow: 5px 5px 5px 5px rgba(225, 225, 225, 0.5);
			margin-top: 3px;background-color: #fff;margin-top: 5px;">
				<view style="overflow: hidden;" class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
					<view style="float: left;width: 30%;height: 100px;padding:5px;">
						<image style="width: 100%;height: 100%;" :src="item.goods.imagelist[0]"></image>
					</view>
					<view style="float: left;width:70%;padding:5px;">
						<view style="height: 20px;font-size: 16px;line-height: 20px;overflow: hidden;">
							{{item.goods.title}}</view>
						<view style="overflow: hidden;height: 30px;margin-top: 15px;line-height: 30px;">
							<view style="color: #e70000;width: 50%;float: left;font-size: 16px;">{{item.goods.num}}元</view>
							<view style="width: 50%;float: left;">
								<tn-number-box @change="changes" :min="1" :max="100" v-model="item.num"></tn-number-box>
							</view>
						</view>
					</view>
				</view>
			</tn-swipe-action-item>



			<view class="foods">
				<view style="font-size: 16px;">合计：{{pic}}</view>
				<view style="margin-left: 10px;">
					<button style="background-color: #e70000;color: #fff;">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		editgwc,
		delgwc,
		getgwc
	} from '@/apis/sc.js'
	export default {
		data() {
			return {
				value: 1,
				pic:0,
				list: [],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#E83A30'
					}
				}],
			};
		},
		onLoad() {
			this.getgwcs()
		},
		methods: {
			onSwiperItemClick(e) {
				console.log(e)
				let list = this.list
				list.forEach(function (item, index) {
					if(item.id==e){
						list.splice(index, 1);
					}
				});
				this.list = list
				this.openpic(list)
				// if (e.type === 'button') {
				// 	this.$tn.message.toast(`点击了第${e.index}个按钮`)
				// } else if (e.type === 'item') {
				// 	this.$tn.message.toast(`点击了item标签,name为${e.name}`)
				// }
			},
			changes(e){
				console.log('状态改变')
				this.openpic(this.list)
			},
			openpic(e){
				let pic = []
				e.forEach(function (item, index) {
					let pics = item.num*item.goods.num
					pic.push(pics)
				});
				this.pic =   pic.reduce((sum, current) => sum + current, 0)
				// console.log(pic); //输出数组的每一个元素
			},
			getgwcs() {
				let data = {
					uid: uni.getStorageSync('uid'),
				}
				getgwc(data).then(res => {
					console.log(res.data)
					if (res.code == 200) {
						this.list = res.data
						this.openpic(res.data)
					}
				}).catch(error => {
					this.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
				})
			},
			//下单
			addorder(){
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.tatils {
		color: #fff;
	}

	.foods {
		padding: 0 9px;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		z-index: 99;
		height: 52px;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>